@import 'colors';
@import 'mixins';

html {
    body {
        #main {
            ul.slideshow {
                float:left;
                width:100%;
                height:100%;

                li {
                    width:100px;
                    height: 100px;
                    float:left;
                    overflow:hidden;
                    margin:0 2px 2px 0;
                    position:relative;

                    a {

                        &.edit, &.delete {
                            position:absolute;
                            right:0;
                            top:0;
                            width:16px;
                            height: 16px;
                            text-indent: -100em;
                            overflow: hidden;
                            background: {
                                color:    rgba($red, 0.8);
                                image:    image-url('jquery-ui/ui-icons_ffffff_256x240.png');
                                repeat:   no-repeat;
                                position: -80px -128px;
                            }
                        }

                        &.edit {
                            right:16px;
                            background-color:rgba(black, 0.5);
                            background-position: -64px -112px;
                        }
                    }



                    &.sort-placeholder {
                        background:rgba($orange, 0.5)
                    }
                    &.ui-sortable-helper {
                        @include box-shadow(0, 0, 10px, $grey);
                    }

                    .sort-handle {
                        position:absolute;
                        left:50%;
                        top:50%;
                        margin:-8px 0 0 -8px;
                        width:16px;
                        height:16px;
                        text-indent: -100em;
                        overflow: hidden;
                        cursor:move;
                        background: {
                            color:    rgba(black, 0.4);
                            image:    image-url('jquery-ui/ui-icons_ffffff_256x240.png');
                            repeat:   no-repeat;
                            position: 0 -80px;
                        };
                        display:none;
                    }

                    &:hover {
                        .sort-handle {
                            display:block
                        }
                    }
                }
            }

            #update-positions {
                display:none
            }
        }
    }
}

@media all and(max-width:900px) {
    html {
        body {
            #main {
                ul.slideshow {
                    width: 96%
                }
            }
        }
    }
}